<template>
  <view class="rental-management">
    <!-- 筛选条件 -->
    <view class="filter-section" :class="{ 'has-batch-action': showBatchAction }">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <view class="custom-search">
          <view class="search-icon">
            <u-icon name="search" size="16" color="#999"></u-icon>
          </view>
          <input v-model="searchQuery" type="text" class="search-input" placeholder-class="search-input-placeholder" placeholder="搜索进货单号" @confirm="handleSearch" />
          <view class="search-btn" @click="handleSearch">搜索</view>
        </view>
      </view>
      <view class="custom-tabs">
        <view v-for="(item, index) in tabs" :key="item.value" class="tab-item" :class="{ active: currentTab === index }" @click="handleTabChange(index)">
          <view class="tab-content">
            <view class="tab-name">{{ item.name }}</view>
            <view class="tab-count">（{{ item.count }}）</view>
          </view>
        </view>
      </view>

      <view class="filter-row">
        <view class="date-range">
          <uni-datetime-picker @change="handleDateChange" v-model="datetimerange" type="daterange" rangeSeparator="至" class="date-picker" />
        </view>

        <view class="batch-transfer-btn" @click="handleBatchTransfer">
          {{ isBatchMode ? '选择转让' : '批量转让' }}
        </view>
      </view>
    </view>

    <!-- 租赁列表 -->
    <view class="rental-list">
      <!-- 空状态 -->
      <view v-if="!loading && rentalList.length === 0" class="empty-state">
        <view class="empty-content">
          <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
          <view class="empty-text">
            <text class="empty-title">暂无租赁记录</text>
            <text class="empty-desc">当前没有找到相关的租赁记录</text>
          </view>
        </view>
      </view>

      <!-- 列表内容 -->
      <view v-else>
        <!-- 全选 -->
        <view v-if="isBatchMode" class="select-all-row" @click="toggleSelectAll">
          <view class="checkbox-wrapper">
            <image class="custom-checkbox" :src="allSelected ? '/static/circle-select.png' : '/static/circle.png'" mode="aspectFit" />
          </view>
          <text class="select-all-text">全选</text>
        </view>
        <view v-for="(item, index) in rentalList" :key="index" class="rental-item" @click="goToDetail(item)">
          <!-- 第一行：左侧序号+创建时间，右侧状态 -->
          <view class="item-row first-row">
            <view class="left-content">
              <text class="item-number">{{ index + 1 }}</text>
              <text class="create-time">创建时间：{{ item.createtime }}</text>
            </view>
            <view class="status-tag">{{ getStatusText(item.leasing_status) }}</view>
          </view>

          <!-- 第二行：手机型号 + 已投保标签 + 选择框 -->
          <view class="item-row product-row">
            <view class="product-name-wrapper">
              <view v-if="isBatchMode" class="checkbox-wrapper" @click.stop="isTransferable(item) && toggleItemSelection(item, index)">
                <image
                    class="custom-checkbox"
                    :src="!isTransferable(item) ? '/static/circle-gray.png' : item.checked ? '/static/circle-select.png' : '/static/circle.png'"
                    mode="aspectFit"
                />
              </view>
              <text class="product-name" :class="{ 'ml-0': !isBatchMode }">{{ item.product_name }}</text>
            </view>
            <view v-if="item.trusteeship_order_id" class="insured-tag">已托管</view>
          </view>

          <!-- 第三行：规格 -->
          <view class="item-row">
            <text class="label">规格：</text>
            <text class="value">{{ item.product_attr }}</text>
          </view>

          <!-- 第四行：期数 -->
          <view class="item-row">
            <text class="label">租赁期：</text>
            <text class="value">{{ item.lease_start_time }} 至 {{ item.lease_end_time }}（{{ item.lease_time }}个月）</text>
          </view>

          <!-- 第五行：价格和收益 -->
          <view class="item-row last-row">
            <text class="label">价格：</text>
            <text class="price">¥{{ item.payment_amount }}</text>

            <!-- 操作按钮 -->
            <view class="action-buttons"></view>
          </view>
        </view>

        <!-- 加载更多 -->
        <u-loadmore :line="true" :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" v-if="rentalList.length > 0" />
      </view>
    </view>
    <!-- 底部批量操作栏 -->
    <view v-if="showBatchAction" class="batch-action-bar">
      <view class="batch-action-content">
        <button class="confirm-btn" @click="showCustomModal">确认转让</button>
      </view>
    </view>
    <!-- 自定义弹窗组件 -->
    <custom-modal
        :show="showModal"
        title="温馨提示"
        :buttons="{
				showCancel: true,
				showConfirm: true,
				confirmText: '确认',
				cancelText: '取消'
			}"
        :options="{
				closeOnClickOverlay: true,
				width: '490rpx'
			}"
        @confirm="handleConfirm"
        @cancel="handleCancel"
        @close="handleCancel"
    >
      <view class="modal-content">
        <view class="modal-line highlight">出租≥3个月的设备才能转让</view>
        <view class="modal-line">转让价格=（采购价格/总月份）*（总月份-已租月份）</view>
        <view class="modal-line note">
          <text>备注：用户转让成功后资金在余额里面查看</text>
          <text>一旦转让将无法撤销</text>
        </view>
      </view>
    </custom-modal>
  </view>
</template>

<script>
import rental from '@/api/modules/rental';
import customModal from '@/components/custom-modal.vue';
export default {
  components: {
    customModal
  },
  data() {
    return {
      // 加载状态
      loadStatus: 'loadmore',
      loadingText: '正在加载...',
      loadmoreText: '上拉加载更多',
      nomoreText: '没有更多了',
      selectedItems: [],
      showBatchAction: false,
      isBatchMode: false, // 是否处于批量选择模式
      allSelected: false, // 是否全选
      showModal: false,
      searchQuery: '',
      currentTab: 0,
      datetimerange: [],
      startDate: '',
      endDate: '',
      tabs: [
        { name: '全部', value: 'all', count: 0 },
        { name: '待出租', value: '0', count: 0 },
        { name: '匹配中', value: '1', count: 0 },
        { name: '出租中', value: '2', count: 0 },
        { name: '已完结', value: '5', count: 0 }
      ],
      rentalList: [],
      // 分页相关
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      finished: false,
      // 测试模式开关，true使用测试数据，false使用真实接口
      isTestMode: false,
      refreshing: false
    };
  },
  onLoad() {
    this.initData();
  },
  onPullDownRefresh() {
    this.refreshing = true;
    this.initData();
  },
  onReachBottom() {
    if (this.loading || this.finished) return;
    this.loadStatus = 'loading';
    this.page++;
    this.fetchRentalList();
  },
  methods: {
    // 确认按钮事件
    async handleConfirm() {
      if (!this.selectedItems.length) {
        uni.showToast({
          title: '请选择要转让的设备',
          icon: 'none'
        });
        return;
      }

      try {
        uni.showLoading({
          title: '处理中...',
          mask: true
        });

        // 获取选中的设备ID数组
        const ids = this.selectedItems.map((item) => item.id);

        // 调用转让API
        await rental.transferLeasing(ids);

        // 转让成功处理
        uni.hideLoading();
        uni.showToast({
          title: '转让成功',
          icon: 'success'
        });

        // 重置状态并刷新列表
        this.resetBatchState();
        this.fetchRentalList();
      } catch (error) {
        console.error('转让失败:', error);
        uni.hideLoading();
        uni.showToast({
          title: error.message || '转让失败，请重试',
          icon: 'none'
        });
      } finally {
        this.showModal = false;
      }
    },

    // 取消按钮事件
    handleCancel() {
      console.log('取消按钮被点击');
      this.showModal = false;
    },

    // 显示弹窗
    showCustomModal(content) {
      if (content) {
        this.modalContent = content;
      }
      this.showModal = true;
    },
    /**
     * 获取测试数据
     * @param {number} page - 当前页码
     * @param {number} pageSize - 每页数量
     * @returns {Promise} 返回测试数据
     */
    async getTestData(page, pageSize) {
      // 模拟网络延迟
      await new Promise((resolve) => setTimeout(resolve, 500));

      const statuses = ['待出租', '匹配中', '出租中', '已完结'];
      const products = ['iPhone 13 Pro Max', 'Huawei P50 Pro', 'Xiaomi 12 Pro', 'OPPO Find X5', 'vivo X80 Pro', 'Samsung S22 Ultra', 'Redmi K50', 'OnePlus 10 Pro'];
      const data = [];
      const startIndex = (page - 1) * pageSize;
      const totalItems = 50; // 总共生成50条测试数据

      // 计算当前页应该生成的数据条数
      const currentPageSize = Math.min(pageSize, Math.max(0, totalItems - startIndex));

      // 获取当前日期和两年前的日期
      const now = new Date();
      const twoYearsAgo = new Date();
      twoYearsAgo.setFullYear(now.getFullYear() - 2);

      for (let i = 0; i < currentPageSize; i++) {
        const random = Math.floor(Math.random() * products.length) % products.length;
        const randomStatus = Math.floor(Math.random() * statuses.length);
        const randomPrice = (Math.floor(Math.random() * 10000) + 3000).toFixed(2);
        const randomBoolean = Math.random() > 0.5;

        // 生成两年内的随机日期
        const randomTime = twoYearsAgo.getTime() + Math.random() * (now.getTime() - twoYearsAgo.getTime());
        const randomDate = new Date(randomTime);

        // 格式化为 YYYY-MM-DD
        const formattedDate = randomDate.toISOString().split('T')[0];

        data.push({
          id: startIndex + i + 1,
          product_name: products[random],
          create_time: formattedDate,
          status: statuses[randomStatus],
          specs: '256GB 黑色',
          periods: '12期',
          price: randomPrice,
          isInsured: randomBoolean
        });
      }

      return {
        data: {
          data,
          total: totalItems,
          current_page: page,
          last_page: Math.ceil(totalItems / pageSize)
        }
      };
    },

    /**
     * 获取真实接口数据
     * @param {number} page - 当前页码
     * @param {number} pageSize - 每页数量
     * @returns {Promise} 返回接口数据
     */
    async getRealData(page, pageSize) {
      const params = {
        page,
        pageSize,
        leasing_status: this.tabs[this.currentTab].value,
        keyword: this.searchQuery,
        start_date: this.datetimerange[0] || '',
        end_date: this.datetimerange[1] || ''
      };

      return await rental.getRentalList(params);
    },

    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/package-purse/rentalManagement/detail?id=${item.id}`
      });
    },

    // 初始化数据
    async initData() {
      this.page = 1;
      this.rentalList = [];
      this.finished = false;
      await this.fetchRentalList();
      if (this.refreshing) {
        uni.stopPullDownRefresh();
        this.refreshing = false;
      }
    },

    // 搜索
    handleSearch() {
      this.initData();
    },

    // 切换标签
    handleTabChange(index) {
      this.currentTab = index;
      this.initData();
    },

    // 日期范围变化
    handleDateChange(e) {
      this.datetimerange = e;
      this.initData();
    },

    // 获取出租列表
    async fetchRentalList() {
      if (this.loading) return;

      this.loading = true;

      try {
        // 如果是第一页，清空当前列表
        if (this.page === 1) {
          this.rentalList = [];
        }

        // 根据模式获取数据
        const res = this.isTestMode ? await this.getTestData(this.page, this.pageSize) : await this.getRealData(this.page, this.pageSize);

        if (res && res.data) {
          const { data, total, current_page, last_page, statistics } = res.data;

          // 如果是第一页，直接赋值，否则追加数据
          if (this.page === 1) {
            this.rentalList = data;
          } else {
            this.rentalList = [...this.rentalList, ...data];
          }

          this.total = total;
          this.page = current_page;
          // 更新加载状态
          if (current_page >= last_page || data.length < this.pageSize) {
            this.loadStatus = 'nomore';
            this.finished = true;
          } else {
            this.loadStatus = 'loadmore';
            this.finished = false;
          }

          // 更新标签数量
          this.updateTabCounts(statistics);
        }
      } catch (error) {
        console.error('获取租赁列表失败:', error);
        uni.showToast({
          title: '获取数据失败，请重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },

    // 更新标签数量
    updateTabCounts(statistics) {
      // 定义tabs索引与statistics属性的映射关系
      const tabMappings = [
        { index: 0, prop: 'total' },
        { index: 1, prop: 'for_rent' },
        { index: 2, prop: 'matching' },
        { index: 3, prop: 'under_lease' },
        { index: 4, prop: 'completed' }
      ];

      // 遍历映射关系，使用this.$set更新数据
      tabMappings.forEach(({ index, prop }) => {
        // 确保statistics包含对应的属性
        if (statistics.hasOwnProperty(prop)) {
          // 使用this.$set更新数组中的对象属性，确保响应式
          this.$set(this.tabs[index], 'count', statistics[prop]);
        } else {
          this.$set(this.tabs[index], 'count', 0);
        }
      });
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待出租',
        1: '匹配中',
        2: '出租中',
        3: '已退机',
        4: '半路退机',
        5: '已完结'
      };
      return statusMap[status] || '未知状态';
    },

    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        0: 'waiting',
        1: 'matching',
        2: 'renting',
        3: 'returned',
        4: 'partially-returned',
        5: 'completed'
      };
      return statusMap[status] || 'default';
    },

    // 处理转让
    handleTransfer(item) {
      uni.showModal({
        title: '提示',
        content: `确定要转让 ${item.product_name} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 调用转让API
            console.log('转让商品:', item);
            // 这里可以添加转让逻辑
          }
        }
      });
    },

    // 检查订单是否可转让（超过3个月）
    isTransferable(item) {
      if (!item.create_time) return false;
      const createDate = new Date(item.create_time);
      const threeMonthsAgo = new Date();
      threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
      return createDate <= threeMonthsAgo;
    },

    // 切换选择状态
    toggleItemSelection(item, index) {
      if (!this.isTransferable(item)) return;

      this.$set(this.rentalList[index], 'checked', !item.checked);

      // 更新选中项
      this.selectedItems = this.rentalList.filter((item) => item.checked);
      this.showBatchAction = this.selectedItems.length > 0;
    },

    // 确认批量转让
    confirmBatchTransfer() {
      // 获取选中的可转让项
      const selectedTransferable = this.rentalList.filter((item) => item.checked && this.isTransferable(item));

      if (selectedTransferable.length === 0) {
        uni.showToast({
          title: '请选择要转让的项目',
          icon: 'none'
        });
        return;
      }

      // 这里添加实际的转让逻辑
      uni.showLoading({ title: '处理中...' });

      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: `成功转让 ${selectedTransferable.length} 个项目`,
          icon: 'success'
        });

        // 重置选择状态
        this.resetSelection();
      }, 1500);
    },

    // 切换全选/取消全选
    toggleSelectAll() {
      this.allSelected = !this.allSelected;
      this.rentalList.forEach((item) => {
        if (this.isTransferable(item)) {
          this.$set(item, 'checked', this.allSelected);
        }
      });
      this.updateSelectedItems();
    },

    // 更新选中项
    updateSelectedItems() {
      this.selectedItems = this.rentalList.filter((item) => item.checked);
      // 更新全选状态
      const transferableItems = this.rentalList.filter((item) => this.isTransferable(item));
      if (transferableItems.length > 0) {
        this.allSelected = transferableItems.every((item) => item.checked);
      } else {
        this.allSelected = false;
      }
    },

    // 重置选择状态
    resetSelection() {
      this.rentalList.forEach((item) => {
        this.$set(item, 'checked', false);
      });
      this.allSelected = false;
      this.selectedItems = [];
      this.isBatchMode = false;
      this.showBatchAction = false;
    },

    // 处理批量转让按钮点击
    handleBatchTransfer() {
      // 检查是否有数据
      if (this.rentalList.length === 0) {
        uni.showToast({
          title: '暂无数据可操作',
          icon: 'none'
        });
        return;
      }

      if (this.isBatchMode) {
        // 如果已经在批量选择模式，则显示确认弹窗
        if (this.selectedItems.length === 0) {
          uni.showToast({
            title: '请至少选择一个设备',
            icon: 'none'
          });
          return;
        }
        this.showModal = true;
      } else {
        // 进入批量选择模式
        this.isBatchMode = true;
        this.showBatchAction = true;
      }
    },

    // 查看详情
    viewDetails(item) {
      uni.navigateTo({
        url: `/package-purse/rentalManagement/detail?id=${item.id}`
      });
    }
  }
};
</script>
<style>
.search-input-placeholder {
  font-weight: 500;
  font-size: 24rpx;
  color: #999999;
}
</style>
<style lang="scss" scoped>
/* 弹窗内容样式 */
.modal-content {
  padding: 20rpx 0;
  text-align: center;
}

.modal-line {
  margin-bottom: 20rpx;
  font-family: 'Source Han Sans CN';
  font-weight: 500;
  font-size: 24rpx;
  color: #262626;
}

.modal-line.highlight {
  font-family: 'PingFang SC';
  font-weight: bold;
  font-size: 28rpx;
  color: #ff0000;
  margin-bottom: 26rpx;
}

.modal-line.note {
  display: flex;
  flex-direction: column;
  font-family: 'Source Han Sans CN';
  font-weight: 400;
  font-size: 20rpx;
  color: #999999;
}

.modal-line.note .warning {
  color: #ff0000;
}
.rental-management {
  padding: 20rpx 30rpx;
  background-color: #f7f8fa;

  .search-bar {
    margin-bottom: 36rpx;
    padding: 0 20rpx;

    .custom-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 60rpx;
      position: relative;

      .search-icon {
        position: absolute;
        left: 50rpx;
        z-index: 1;
      }

      ::v-deep .search-input {
        flex: 1;
        height: 100%;
        padding: 0 24rpx 0 85rpx;
        font-size: 28rpx;
        background: rgba(248, 248, 250, 0.99);
        border-right: none;
        border-radius: 29rpx 0 0 29rpx;
        outline: none;
        box-sizing: border-box;
      }

      .search-btn {
        width: 110.3rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ff4400;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        border-radius: 0 29rpx 29rpx 0;
      }
    }
  }

  .filter-section {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    &.has-batch-action {
      margin-bottom: 0;
    }

    .custom-tabs {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .tab-item {
        flex: 1;
        text-align: center;
        padding: 10rpx 0;

        .tab-content {
          .tab-name {
            font-size: 28rpx;
            color: #999999;
            margin-right: 8rpx;
          }

          .tab-count {
            font-size: 24rpx;
            color: #999999;
          }
        }

        &.active {
          .tab-name,
          .tab-count {
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }

    .filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
    }

    .date-range {
      width: 364.7rpx;
      margin-right: 20rpx;

      ::v-deep .uni-date {
        width: 364.7rpx;
        height: 60rpx;
        background: #f4f6f8;
        border-radius: 29rpx;
        opacity: 0.99;
        position: relative;
        z-index: 2;
        flex: none;
      }

      ::v-deep .uni-date .icon-calendar {
        display: none;
      }

      ::v-deep .uni-date .uni-icons {
        font-size: 24rpx !important;
      }
      ::v-deep .icon-calendar {
        display: none;
      }
      ::v-deep .uniui-calendar {
        display: none;
      }

      ::v-deep .uni-date-x--border {
        border: none;
      }

      ::v-deep .uni-date-x {
        background-color: transparent;
        align-items: start;
      }

      ::v-deep .uni-date__x-input {
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        display: flex;
        align-items: center;
        line-height: normal;
        height: 60rpx;
        justify-content: center;
      }

      ::v-deep .range-separator {
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        display: flex;
        align-items: center;
        line-height: normal;
        height: 60rpx;
        justify-content: center;
      }

      ::v-deep .u-subsection {
        width: 240rpx;
        height: 56rpx;
        background: #ffffff;
        border-radius: 16rpx;
        opacity: 0.99;
        position: relative;
        z-index: 1;
      }

      ::v-deep .u-subsection__item__text {
        font-family: 'PingFang SC' !important;
        font-weight: 400 !important;
        font-size: 24rpx !important;
        color: #999999 !important;
      }

      ::v-deep .u-subsection__bar {
        background: #fff;
        border-radius: 7rpx;
        opacity: 0.99;
      }
    }

    .batch-transfer-btn {
      font-weight: 500;
      font-size: 26rpx;
      color: #ff0000;
      margin-left: 20rpx;
      white-space: nowrap;
      line-height: 1.4;
      cursor: pointer;
      border-bottom: 2rpx solid rgba(255, 0, 0, 0.2);
    }

    .status-tabs {
      margin-bottom: 10rpx;
    }

    ::v-deep .uni-date__x-input {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      display: flex;
      align-items: center;
      line-height: normal;
      height: 60rpx;
      justify-content: center;
    }

    ::v-deep .range-separator {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      display: flex;
      align-items: center;
      line-height: normal;
      height: 60rpx;
      justify-content: center;
    }

    .date-separator {
      margin: 0 10rpx;
      color: #909399;
    }
  }
}

.select-all-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10rpx 0rpx;

  .select-all-text {
    margin-left: 12rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1;
  }

  .checkbox-wrapper {
    width: 36rpx;
    height: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .custom-checkbox {
    width: 20rpx;
    height: 20rpx;
    display: block;
  }
}

.rental-list {
  min-height: 400rpx;
  position: relative;

  /* 空状态样式 */
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40rpx;

    .empty-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 400rpx;
    }

    .empty-image {
      width: 240rpx;
      height: 180rpx;
      margin-bottom: 40rpx;
      opacity: 0.8;
    }

    .empty-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40rpx;

      .empty-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 12rpx;
      }

      .empty-desc {
        font-size: 26rpx;
        color: #999;
        line-height: 1.5;
      }
    }

    .empty-btn {
      width: 100%;

      .u-btn {
        width: 200rpx;
        height: 72rpx;
        font-size: 28rpx;
        border-radius: 36rpx;
      }
    }
  }

  .rental-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 22rpx;
    position: relative;

    .item-row {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      color: #999999;

      &.product-row {
        .product-name-wrapper {
          display: flex;
          align-items: center;
          flex: 1;

          .product-name {
            margin-left: 12rpx;
            font-size: 30rpx;
            color: #333;
            font-weight: 500;
            &.ml-0 {
              margin-left: 0;
            }
          }
        }
      }

      &.first-row {
        justify-content: space-between;
        margin-bottom: 20rpx;

        .left-content {
          display: flex;
          align-items: center;
          flex: 1;
        }

        .status-tag {
          margin-left: 20rpx;
          padding: 4rpx 12rpx;
          background-color: rgba(255, 68, 0, 0.1) !important;
          color: #ff4603 !important;
          border-radius: 6rpx !important;
          font-size: 24rpx;
          white-space: nowrap;
        }

        &--success,
        &--warning,
        &--error,
        &--info {
          background-color: rgba(255, 68, 0, 0.1) !important;
          color: #ff4603 !important;
          border: none !important;
        }
      }
    }

    &.product-row {
      margin-bottom: 20rpx;
      align-items: center;
    }

    &.last-row {
      margin-bottom: 0;
      justify-content: space-between;
      align-items: center;
    }

    .checkbox-wrapper {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      .custom-checkbox {
        width: 20rpx;
        height: 20rpx;
        display: block;
      }
    }

    .item-number {
      min-width: 66.5rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      background: rgba(255, 68, 0, 0.1);
      border-radius: 14rpx;
      margin-right: 20rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #ff0000;
      flex-shrink: 0;
    }

    .create-time {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
    }

    .product-name {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      margin-right: 12rpx;
    }

    .insured-tag {
      margin-left: 10rpx;
      background-color: #ff4806 !important;
      color: #ffffff !important;
      border-radius: 4rpx;
      border: none !important;
      font-weight: 400;
      font-size: 22rpx;

      &--error {
        background-color: #ff4806 !important;
        color: #ffffff !important;
        border: none !important;
      }
    }

    .label {
      font-size: 26rpx;
      color: #909399;
      margin-right: 10rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 26rpx;
    }

    .price {
    }

    .action-buttons {
      margin-left: auto;

      .u-btn {
        margin-left: 20rpx;
      }
    }
  }
}

/* 底部批量操作栏 */
.batch-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  z-index: 100;

  .batch-action-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .selected-count {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .confirm-btn {
      width: 680rpx;
      height: 90rpx;
      line-height: 80rpx;
      text-align: center;
      background: #ff4400;
      color: #fff;
      border-radius: 40rpx;
      font-size: 30rpx;
      border: none;
      margin: 0;
      padding: 0;

      &::after {
        border: none;
      }

      &:active {
        opacity: 0.8;
      }

      &.disabled {
        background: #ccc;
        color: #999;
      }
    }
  }
}
</style>
